<template>
	<navbar title="报名详情" :isBack="true"></navbar>
	<loading v-if="!info"></loading>
	<template v-if="info">
		<view class="info flex-direction-column">
			<view class="wait-pay flex" v-if="info.time != 0">
				您的订单将与
				<u-count-down separator="zh" separator-size="28" separator-color="#606266" color="#E6425E"
					:show-hours="false" :show-days="false" :timestamp="info.time * 1000" @end="endTime"></u-count-down>
				后取消，请尽快支付吧~
			</view>
			<!-- <view class="top flex-space-between">
        <view class="t2 flex"> 报名信息 </view>
        <view class="name flex" @click="findEntry">
          <text>{{ info.codeData.user[0].name }}</text>
          <image src="/static/icon/03.png"></image>
        </view>
      </view> -->
			<view class="bottom flex-direction-column">
				<!-- <view class="b-top flex">
          <image src="/static/icon/19.png"></image>
          <text>{{ info.club_name }}</text>
        </view> -->
				<view class="b-middle flex-space-between">
					<!-- @click="tools.navTo(info.active.active_type != 3 ? '/pagesA/match/detail?id=' + info.active.id : '/pagesA/activity/detail?id=' + info.active.id)"> -->
					<image mode="aspectFill" :src="info.active.cover"></image>
					<view class="right flex-direction-column">
						<view class="name">
							<image class="online" v-if="info.active.type == 2" src="/static/image/07.png"></image>
							<text class="two-line"
								:style="info.active.type != 2 ? 'text-indent: 0' : ''">{{ info.active.name }}</text>
						</view>
					</view>
					<!-- /已完成 -->
					<view class="order_logo"  v-if="info.state == 2||info.state == 3">
						{{info.state == 2 ? '已结束' : '已退款'}}
					</view>
					<view class="order_logo2" v-if="info.state == 1">
						待参与
					</view>
					<!-- v-if="info.time != 0" -->
					<view class="order_logo3" v-if="info.state == 0">
						待支付
					</view>
				</view>
				<view class="bottom2 flex">
					<image class="pic_dingwei" src="/static/icon/dingwei.png"></image>
					<view class="bottom_text">{{ info.active.province }}·{{ info.active.city }}</view>
				</view>
				<view class="bottom2 flex" style="margin-top: 10rpx;">
					<image class="pic_dingwei2" src="/static/icon/naozhong.png"></image>
					<view class="bottom_text">{{ info.active.start_time }}</view>
				</view>
				<!-- 待支付 -->
				<!-- <view class="b-bottom flex-space-between bg1" v-if="info.state == 0 || info.state == 3">
					<image v-if="info.state == 0" class="status" src="/pagesA/static/image/07.png"></image>
					<image v-if="info.state == 3" class="status" src="/pagesA/static/image/25.png"></image>
					<view class="left flex-direction-column" v-if="info.active.active_type < 3">
						<text class="one-line">{{ info.group.name }}</text>
						<text>报名人数{{ info.order.user_num }}人</text>
					</view>
					<view class="left flex-direction-column" v-else>
						<text class="one-line">{{ info.order_user.name }}</text>
						<text>{{ info.order_user.mobile }}人</text>
					</view>
					<view class="right">
						<view class="price">{{ tools.isFree(info.group.price) }}</view>
					</view>
				</view> -->
				<!-- 待参与 | 已完成 | 已过期 -->
				<!-- <view class="b-bottom flex-space-between" :class="info.active.type != 2 ? 'bg2' : 'bg1'" v-else>
					<image class="status" src="/pagesA/static/image/04.png" v-if="info.state == 1"></image>
					<image class="status" src="/pagesA/static/image/05.png" v-if="info.state == 2"></image>
					<image class="status" src="/pagesA/static/image/06.png" v-if="info.state == 4"></image>
					<view class="left flex-direction-column" v-if="info.active.active_type < 3">
						<text class="one-line">{{ info.group.name }}</text>
						<text>报名人数{{ info.order.user_num }}人</text>
					</view>
					<view class="left flex-direction-column" v-else>
						<text class="one-line">{{ info.order_user.name }}</text>
						<text>{{ info.order_user.mobile }}人</text>
					</view>
					<view class="right flex">
						<view class="price">{{ tools.isFree(info.group.price) }} </view>
						<view class="find" :style="info.state == 2 ? 'color: #AAAAAA' : ''" @click="findCode"
							v-if="info.active.type != 2">查看签到码</view>
					</view>
				</view> -->
				<view class="application_info flex-space-between" @click="findEntry">
					<view class="application_info_left">
						<view class="left_top">
							{{info.group.name}}
						</view>
						<view class="left_bottom">
							¥{{info.group.price}}
						</view>
					</view>
					<view class="application_info_right flex">
						<view class="right_top">报名信息</view>
						<image src="/static/icon/03.png" ></image>
					</view>
				</view>
				<!-- 成绩打卡 -->
				<!-- <view class="score flex" v-if="info.active.type == 2">
					<view class="btn flex-center"
						@click=";(clockRef.isShow = true), (clockRef.params.id = info.order_user.id), clockRef.getAchievementApi()">
						<image src="/pagesA/static/image/10.png"></image>
						<text>{{ info.is_upload == 1 ? '查看成绩' : '成绩打卡' }}</text>
					</view>
				</view> -->
			</view>
		</view>
		<view class="order flex-direction-column">
			<view class="t2C flex">订单信息</view>
			<view class="item flex-space-between">
				<view class="label">订单编号</view>
				<view class="desc"> {{ info.order.out_trade_no }}</view>
			</view>
			<view class="item flex-space-between">
				<view class="label">下单时间</view>
				<view class="desc"> {{ info.order.create_time }}</view>
			</view>
			<view class="item flex-space-between" v-if="info.order.pay_time">
				<view class="label">支付方式</view>
				<view class="desc"> 微信支付</view>
			</view>
			<view class="item flex-space-between" v-if="info.order.pay_time">
				<view class="label">支付时间</view>
				<view class="desc"> {{ info.order.pay_time }}</view>
			</view>
		</view>
		<!-- v-if="info.state == 0" -->
		<view class="pay flex-space-between" v-if="info.state == 0">
			<view class="left flex">{{ tools.isFree(info.order.total_price) }}</view>
			<view class="right flex">
				<view class="btn" @click="cancel">取消</view>
				<view class="btn"
					@click="tools.navTo('/pagesA/order/cashier?params=' + JSON.stringify({ price: info.order.total_price, id: info.order.id }))">
					确认支付</view>
			</view>
		</view>
		<!-- 打卡 -->
		<clockPopup ref="clockRef" v-if="info" :isUpload="info.is_upload" @close="clockRef.isShow = false"
			@success="info.is_upload = 1"></clockPopup>
		<!-- 签到 -->
		<signPopup ref="signRef" :info="info.codeData" @close="signRef.isShow = false"></signPopup>
	</template>
</template>

<script setup lang="ts">
	import { ref ,reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { getOrderDetail, getCancel ,getEnrollInfo } from '@/service/api/user'
	import tools from '@/utils/tools'
	import signPopup from '@/components/popup/sign.vue'
	import clockPopup from '@/components/popup/clock.vue'

	// state 0 待支付 1 已报名 2 已结束 3 已退款
	let info = ref(null)
	// 获取组件实例
	const clockRef = ref(null)
	const signRef = ref(null)
	
	const dataId = reactive({
		id:null
	})
	// 取消按钮
	const cancel = () => {
		getCancelApi(info.value.order.id)
	}

	// 取消订单
	const getCancelApi = async (id) => {
		if (info.value.state == 0 && info.value.time == 0) {
			const { code, msg } = await getCancel({ id })
			if (code == 1) {
				tools.showToast(msg)
				setTimeout(() => {
					tools.getPage()
				}, 500)
				return
			}
			tools.showToast(msg)
			return
		}
		tools.showModel('提示', '是否确定取消此订单').then(async () => {
			const { code, msg } = await getCancel({ id })
			if (code == 1) {
				tools.showToast(msg)
				setTimeout(() => {
					tools.getPage()
				}, 500)
				return
			}
			tools.showToast(msg)
		})
	}

	// 订单详情
	const getOrderDetailApi = async (id) => {
		const { msg } = await getOrderDetail({ id })
		info.value = msg
		// 已结束
		if (info.value.state == 0 && info.value.time == 0) {
			getCancelApi(info.value.order.id)
		}
	}

	// 倒计时结束
	const endTime = () => {
		getCancelApi(info.value.order.id)
	}

	// 查看签到码
	const findCode = () => {
		if (info.value.state == 2) return tools.showToast('核销码已过期')
		signRef.value.isShow = true
	}

	// 查看报名信息
	const findEntry =async () => {
		let entryInfo = {
			way: 1,
			form: '',
			isOrder: true,
			info: info.value.active,
			params: {
				formList: [],
				id:info.value.group.id,
				team:[],
				have_referee:'',
				referee:'',
				score_imgs:[]
			}
		}
		// https://sjmq.nrunning.com/phone/user/enrollInfo
		const { msg } = await getEnrollInfo({ id:dataId.id })
		console.log(msg);
		// 单人
		if (msg.type== 1) {
			entryInfo.params.formList = msg.order_user[0].sign_form
			entryInfo.way = 1
		} else {
			entryInfo.params.team=msg.team
			entryInfo.params.referee=msg.referee
			entryInfo.params.have_referee=msg.have_referee
			msg.order_user.forEach((item) => {
				entryInfo.params.formList.push(item.sign_form)
			})
			entryInfo.way = 2
			
		}
		tools.setStorage<string>('entryInfo', JSON.stringify(entryInfo))
		tools.navTo('/pagesA/entry/confirm?id='+dataId.id)
	}

	onLoad((option) => {
		dataId.id=option.id
		// 订单详情
		getOrderDetailApi(option.id)
	})
</script>

<style>
	page {
		background-color: #f9f9f9;
	}
</style>
<style lang="scss" scoped>
	// 已打卡
	.clock-active {
		color: #ffffff;
		background-color: #dddddd !important;
	}

	.bg1 {
		background-image: url('../../pagesA/static/image/08.png');

		text {
			width: 462rpx;
		}

		.price {
			margin-right: 56rpx;
		}
	}

	.bg2 {
		background-image: url('../../pagesA/static/image/09.png');

		text {
			width: 350rpx;
		}

		.price {
			margin-right: 108rpx;
		}

		.find {
			width: 34rpx;
			height: 146rpx;
			font-size: 24rpx;
			color: #e6425e;
			line-height: 28rpx;
			margin-right: 35rpx;
		}
	}

	.info {
		margin-top: 20rpx;
		background-color: #fff;
		margin: 22rpx;
		padding: 30rpx;
		border-radius: 20rpx;

		.wait-pay {
			height: 44rpx;
			font-size: 30rpx;
			line-height: 44rpx;
			margin-bottom: 34rpx;
		}

		.top {
			padding-bottom: 28rpx;
			border-bottom: 1px solid #eee;

			.t2 {
				border: none;
				height: 40rpx;
				line-height: 40rpx;
				padding-bottom: 0;
			}

			.name {
				image {
					width: 12rpx;
					height: 20rpx;
				}

				text {
					height: 40rpx;
					font-size: 28rpx;
					line-height: 40rpx;
					margin-right: 16rpx;
					font-weight: bold;
				}
			}
		}

		.bottom {

			// margin-top: 32rpx;
			.b-top {
				image {
					width: 24rpx;
					height: 24rpx;
				}

				text {
					height: 34rpx;
					font-size: 24rpx;
					line-height: 34rpx;
					color: #777777;
					margin-left: 6rpx;
				}
			}

			.b-middle {
				position: relative;
				.order_logo{
					text-align: center;
					position: absolute;
					width: 120rpx;
					// height: 44rpx;
					line-height: 40rpx;
					top: -30rpx;
					left: -30rpx;
					color: #FFFFFF;
					background: linear-gradient(97deg, #DDDDDD 0%, #AAAAAA 100%);
					opacity: 1;
					border-radius: 20rpx 0rpx 20rpx 0rpx;
				}
				.order_logo2{
					text-align: center;
					position: absolute;
					width: 120rpx;
					// height: 44rpx;
					line-height: 40rpx;
					top: -30rpx;
					left: -30rpx;
					color: #FFFFFF;
					background: linear-gradient(97deg, #89D4AA 0%, #6CAF78 100%);
					opacity: 1;
					border-radius: 20rpx 0rpx 20rpx 0rpx;
				}
				.order_logo3{
					text-align: center;
					position: absolute;
					width: 120rpx;
					// height: 44rpx;
					line-height: 40rpx;
					top: -30rpx;
					left: -30rpx;
					color: #FFFFFF;
					background: linear-gradient(97deg, #F9AD3B 0%, #FD7683 100%);
					opacity: 1;
					border-radius: 20rpx 0rpx 20rpx 0rpx;
				}
				// margin-top: 28rpx;
				image {
					width: 240rpx;
					height: 156rpx;
					border-radius: 6rpx;
				}

				.right {
					flex: 1;
					margin-left: 22rpx;

					.name {
						width: 100%;
						position: relative;
						display: inline-block;

						.online {
							width: 86rpx;
							height: 36rpx;
							display: inline;
							border-radius: 0;
							margin-top: 5rpx;
							margin-right: 5rpx;
							position: absolute;
						}

						text {
							height: 80rpx;
							color: #000000;
							font-size: 30rpx;
							text-indent: 90rpx;
							line-height: 40rpx;
							font-weight: bold;
						}
					}

					.desc {
						height: 40rpx;
						font-size: 26rpx;
						line-height: 40rpx;
						color: #777777;
						margin-top: 5rpx;
					}
				}
			}

			.b-bottom {
				width: 100%;
				height: 162rpx;
				margin-top: 28rpx;
				position: relative;
				background-repeat: no-repeat;
				background-size: 100% 100%;

				.status {
					top: 0;
					left: 0;
					width: 88rpx;
					height: 36rpx;
					position: absolute;
				}

				.left {
					margin-left: 26rpx;

					text {
						&:nth-child(1) {
							height: 42rpx;
							font-size: 30rpx;
							margin-top: 8rpx;
							line-height: 42rpx;
						}

						&:nth-child(2) {
							height: 40rpx;
							font-size: 28rpx;
							line-height: 40rpx;
							color: #999999;
							margin-top: 12rpx;
						}
					}
				}

				.right {
					.price {
						height: 44rpx;
						color: #e6425e;
						font-size: 32rpx;
						line-height: 44rpx;
					}
				}
			}

			.score {
				margin-top: 36rpx;
				justify-content: flex-end;

				.btn {
					width: 190rpx;
					height: 60rpx;
					background: rgba(230, 66, 94);
					border-radius: 6rpx;

					image {
						width: 26rpx;
						height: 26rpx;
						margin-right: 10rpx;
					}

					text {
						font-size: 28rpx;
						color: #ffffff;
					}
				}
			}
		}
	}

	.order {
		margin-top: 20rpx;
		overflow: hidden;
		background-color: #fff;
		padding: 30rpx 28rpx 34rpx 28rpx;
		margin: 20rpx;
		border-radius: 20rpx;
		.t2 {
			height: 68rpx;
			margin-top: 10rpx;
			margin-bottom: 20rpx;
		}
		.t2C {
			height: 44rpx;
			margin-top: 10rpx;
			margin-bottom: 20rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 44rpx;
			color: #5062A7;
		}
		.item {
			height: 60rpx;
			font-size: 28rpx;
			line-height: 60rpx;

			.label {
				width: 228rpx;
				color: #777777;
			}

			.desc {
				width: 388rpx;
				color: #000;
			}
		}
	}

	.pay {
		left: 0;
		right: 0;
		bottom: 0;
		position: fixed;
		background-color: #fff;
		// padding: 26rpx 24rpx 60rpx 24rpx;
		padding-bottom: 60rpx;
		padding-left: 22rpx;
		box-shadow: 0rpx -8rpx 12rpx rgba(0,0,0,0.08);
		align-items: center;
		.left {
			color: #e6425e;
			height: 50rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 50rpx;
			color: #F24C55;
			&::before {
				content: '总计:';
				color: #777777;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 50rpx;
				color: #000000;
				opacity: 1;
				margin-bottom: 12rpx;
			}
		}

		.right {
			.btn {
				width: 220rpx;
				height: 84rpx;
				font-size: 32rpx;
				line-height: 84rpx;
				text-align: center;
				border-radius: 6rpx;

				&:nth-child(1) {
					color: #666666;
					// margin-right: 26rpx;
					background-color: #EEEEEE;
				}

				&:nth-child(2) {
					color: #fff;
					background: linear-gradient(270deg, #354678 0%, #5062A7 100%);
				}
			}
		}
	}

	.bottom2 {
		margin-top: 36rpx;

		.pic_dingwei {
			width: 28rpx;
			height: 32rpx;
		}

		.pic_dingwei2 {
			width: 28rpx;
			height: 28rpx;
		}

		.bottom_text {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			opacity: 1;
			margin-left: 14rpx;
		}
	}
	.application_info{
		height: 120rpx;
		background: #F9F9F9;
		width: 710rpx;
		margin-left: -30rpx;
		padding: 0 30rpx;
		.application_info_left{
			.left_top{
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 40rpx;
				color: #000000;
			}
			.left_bottom{
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #F24C55;
			}
		}
		.application_info_right{
			.right_top{
				width: 110rpx;
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #666666;
				opacity: 1;
			}
			image{
				width: 12rpx;
				height: 22rpx;
			}
		}
	}
</style>